<template>
  <div>
    <div class="box">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push('/home')"
      >
        <template #right> <van-icon name="wap-home-o" size="25" /> </template
      ></van-nav-bar>
    </div>
    <div class="details" v-for="item in getnewList" :key="item.id">
      <h1>{{ item.title }}</h1>
      <p>
        <span>{{ item.add_time | formatDate }}</span>
        <span class="browse">{{ item.click }} 次浏览</span>
        分类：{{ item.category }}
      </p>
      <!-- 2.1 图片详情中的图片数组 -->
      <!-- 当使用params传参方式的时候才渲染图片数组 -->
      <div class="imageList" v-if="imgList.length">
        <div class="imageItem" v-for="(item, index) in imgList" :key="index">
          <img :src="item.src" alt="" />
        </div>
      </div>
      <div v-html="item.content" class="oncontent"></div>
    </div>

    <Comment
      :commentLis="commentList"
      :total="total"
      @toLoad="toLoadFn"
      @publish="publishFn"
    ></Comment>
  </div>
</template>

<script>
import Comment from "../components/Comment.vue";
import { getNew, getCommentsAPI, postcommentAPI } from "../apis/user";
import { getimageInfoAPI, getthumimagesAPI } from "../apis/user";
export default {
  data() {
    return {
      getnewList: {},
      pageindex: 1,
      commentList: [],
      total: 0,
      imgList: [],
      id: this.$route.params.newid,
    };
  },
  // 新闻详情
  async created() {
    // const id = this.$route.params.newid;
    const res = await getNew(this.id);
    console.log(res);
    this.getnewList = res.data.message;
    console.log(this.getnewList);
    this.getComments();

    // const id = this.$route.query.newid;
    const res1 = await getimageInfoAPI(this.id);
    console.log(res1);
    this.getnewList = res1.data.message;
    console.log(this.getnewList);

    const res2 = await getthumimagesAPI(this.id);
    console.log(res2);
    this.imgList = res2.data.message;
    console.log(this.imgList);
  },
  // 评论
  methods: {
    async getComments() {
      // const id = this.$route.params.newid;
      const res = await getCommentsAPI(this.id, { pageindex: this.pageindex });
      console.log(res);
      this.commentList.push(...res.data.message);
      this.total = res.data.total;
    },
    toLoadFn() {
      // 加载更多点击
      this.pageindex++;
      this.getComments();
    },
    // 发布按钮点击事件
    async publishFn(val) {
      console.log(val);
      // 请求报文体Body格式:
      // content=评论内容
      // const id = this.$route.params.newid;
      const res = await postcommentAPI(this.id, `content=${val}`);
      // const res = await postcommentAPI(id, "content=" + val);
      console.log(res);
      if (res.data.message === "评论提交成功") {
        this.$toast.success("评论提交成功");
        this.pageindex = 1;
        this.commentList = [];
        this.getComments();
      } else {
        this.$toast.fail("评论提交失败");
      }
    },
  },
  components: {
    Comment,
  },
};
</script>

<style lang="less" scoped>
.imageList {
  display: flex;
  flex-wrap: wrap;
  .imageItem {
    width: 29%;
    margin: 3% 2%;
    img {
      width: 100%;
    }
  }
}
.box {
  margin-top: 40px;
}
.details {
  border-top: 2px solid red;
  padding-top: 10px;
  //   padding-left: 5px;
  h1 {
    font-size: 19px;
    color: #0088d1;
    padding-left: 5px;
  }
  p {
    font-size: 12px;
    color: #999;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid red;
    padding-left: 5px;
    .browse {
      padding: 10px;
    }
  }
  .oncontent {
    font-size: 14px;
    color: #5c5c5c;
    padding: 5px;
  }
}
.getcomment {
  margin-top: 60px;
  .commenttitle {
    height: 60px;
    border-bottom: 1px solid #c8c8cd;
    padding: 10px 0 50px 10px;
    display: flex;
    h1 {
      width: 300px;
      font-size: 24px;
    }
    .commentretu {
      width: 100px;
      margin-top: 15px;
      text-decoration: none;
      color: #007aff;
    }
  }
  .getpublish {
    padding: 10px;
    border-bottom: 1px solid #c8c8cd;
    textarea {
      display: block;
      width: 100%;
      height: 100px;
      padding: 10px;
      font-size: 18px;
    }
    .getbtn {
      display: block;
      width: 100%;
      color: #fff;
      background-color: #26a2ff;
      border-radius: 4px;
      border: 0;
      font-size: 18px;
      height: 41px;
      overflow: hidden;
      position: relative;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>